import React, { Component } from 'react'
import { SetOutline, MessageOutline, RightOutline, AddOutline, UserContactOutline, TransportQRcodeOutline, CalendarOutline, CouponOutline, TagOutline, HeartOutline, KoubeiOutline, GiftOutline, InformationCircleOutline } from 'antd-mobile-icons'
import Heade from '../image/1.gif'
import Logo from '../image/2.gif'

export default class my extends Component {
    //跳转登录
    Login() {
        this.props.history.push({
            pathname: `/login`
        })
    }

    //跳转聊天页面
    chat() {
         this.props.history.push({
            pathname: `/chat`
        })
    }

    //
    state = {
        assetsList: [
            {
                num: 0.00,
                tit: '账户余额(元)'
            },
            {
                num: 0,
                tit: '优惠券(张)'
            },
            {
                num: 0,
                tit: '金币'
            }
        ],
        name: sessionStorage.getItem('name'),
        url: sessionStorage.getItem('url'),
        serviceList: [
            {
                url: <TransportQRcodeOutline />,
                tit: '我的设备'
            },
            {
                url: <CalendarOutline />,
                tit: '健康计划'
            },
            {
                url: <CouponOutline />,
                tit: '健康测评'
            },
            {
                url: <TagOutline />,
                tit: '姨妈助手'
            },
            {
                url: <HeartOutline />,
                tit: '我的收藏'
            },
            {
                url: <KoubeiOutline />,
                tit: '春雨客服'
            },
            {
                url: <GiftOutline />,
                tit: '有奖推荐'
            },
            {
                url: <InformationCircleOutline />,
                tit: '关于春雨'
            }
        ],
    }

    render() {
        const { assetsList, name, url, serviceList } = this.state
        return (
            <div className="my">
                <div className="my-up">
                    <span><MessageOutline /></span>
                    <span><SetOutline /></span>
                </div>
                <div className="head">
                    {
                        sessionStorage.getItem('token') ? <dl>
                            <dt>
                                <img src={url} alt="" className='head1' />

                            </dt>
                            <dd>
                                <p className='headOne'>{name}</p>
                                <p>账户管理<RightOutline /></p>
                            </dd>
                        </dl> : <dl onClick={() => this.Login()}>
                                <dt>
                                    <img src={Heade} alt=""/>
                                </dt>
                                <dd>
                                    <p className='headOne'>登录与注册</p>
                                    <p>账户管理<RightOutline /></p>
                                </dd>
                            </dl>

                    }
                </div>
                <div className="logo">
                    <img src={Logo} alt="" />
                </div>
                <div className="assets">
                    {
                        assetsList.length && assetsList.map((item, index) => {
                            return <dl key={index}>
                                <dt>{item.num}</dt>
                                <dd>{item.tit}</dd>
                            </dl>
                        })
                    }
                </div>
                {
                    sessionStorage.getItem('token') ? <div className="order">
                        <p>
                            &nbsp;&nbsp;我的订单
                      <span>查看全部<RightOutline /></span>
                        </p>
                        <div className="order-box">
                            <p>
                                当前没有正在进行的订单<br />
                          可点击右上方查看全部
                      </p>
                        </div>
                    </div> : ""
                }
                {
                    sessionStorage.getItem('token') ? <div className="archives">
                        <p>&nbsp;&nbsp;健康档案</p>
                        <div className="archives-box">
                            <p>
                                <span><AddOutline /> 新建档案</span><br />
                          请添加健康档案，进行档案管理
                      </p>
                        </div>
                    </div> : ""
                }
                <div className="service">
                    <p>&nbsp;&nbsp;工具与服务</p>
                    {/* 跳转聊天页面 */}
                    <dl onClick={()=>this.chat()}>
                        <dt><UserContactOutline /></dt>
                        <dd>我的医生</dd>
                    </dl>
                    {
                        serviceList.length && serviceList.map((item, index) => {
                            return <dl key={index}>
                                <dt>{item.url}</dt>
                                <dd>{item.tit}</dd>
                            </dl>
                        })
                    }
                </div>
            </div>
        )
    }
}
